<template>
  <div class='u-businseAttrList'>
    <el-button v-if='isShowBtn' @click='openSelectAttrBox'>选择属性</el-button><el-button v-if='isShowBtn' @click='openCreateAttrBox'>创建属性</el-button>
    <div class='sku-wrap' v-if='isShowSelectBox'>
      <div class='sku-list' v-for='(v, i) in skuList' :key='i'>
        <div class="top">
          <div class="title">{{ v.feature.label || v.feature.name }}</div>
          <div>
            <!-- <el-checkbox v-model='v.isSku'>设为SKU属性</el-checkbox> -->
            <i class='icon el-icon-edit-outline' @click='editSku(i)'></i><i class='icon el-icon-close' @click='closeSku(i)'></i>
          </div>
        </div>
        <div class="desc">{{ v.desc }}</div>
      </div>
    </div>

    <Select-attribute ref='selectAttr' :selectIndex='selectIndex'
      :aType='aType'
      :openType='openType'
      :skuList='skuList'
      @getSku='getSelectAttrSku'
    />

    <Create-attribute ref='createAttr' :selectIndex='selectIndex2'
      :openType='openType2' :skuId='createAttrSkuId'
      :limit='limitCreateNum'
      @getSku='getCreateAttrSku'
    />
  </div>
</template>

<script>
import SelectAttribute from '@/components/business/SelectAttribute'
import CreateAttribute from '@/components/business/CreateAttribute'
// import md5 from 'blueimp-md5'
import { getChangeAttrs, formatDetailDataToAttrList as $formatDetailDataToAttrList, setAttrData, createSkus, contactAttrData } from '@/util/formatAttr'

/**
 * attrList 数据结构
 * @param
 */

/**
 * 创造 sku 属性对象
 * @param {Object}
 * @param {Object} feature
 * @param {Object} feature.label 属性名
 * @param {Object} feature.value 属性 id
 * @param {Array<Object>} feature.classes 属性的所有分类（包括子分类）
 * @param {Object} classes[0]: { id: 'class id', name: 'class name' }
 * @param {String} desc: ''
 */

export default {
  name: 'businseAttrList',

  props: {
    aType: '',
    limitCreateNum: {
      default: 99
    },
    isShowSelectBox: {
      default: true
    },
    isShowBtn: {
      default: true
    }
  },

  components: {
    SelectAttribute,
    CreateAttribute
  },

  data() {
    return {
      openType: 'add',
      selectIndex: -1,
      selectIndex2: -1,
      openType2: 'add',
      createAttrSkuId: '',
      // sku
      skuList: []
    }
  },

  methods: {
    /**
     * 将 skuList 转成后台要的数据结构
     */
    getChangeAttrs,

    // attr
    async getAttributes() {
      const { code, data } = await this.$api.utilsGetAllClasses({
        aMerchantId: this.aFirmId,
        aType: this.aType
      })
      if (code === 0) {
        // 生成属性列表
        const tmp = []
        data.list.forEach(v => {
          if (v.is_require === '1') return false
          tmp.push(setAttrData(v))
        })
        // 生成 sku
        return createSkus(tmp)
      } else {
        return []
      }
    },

    // 格式化详情的数据
    async formatDetailDataToAttrList(data) {
      const selectedList = $formatDetailDataToAttrList(data)
      const allList = await this.getAttributes()
      this.skuList = contactAttrData(allList, selectedList, 'filter')
      this.$emit('getSku', this.skuList)
    },

    openSelectAttrBox() {
      this.openType = 'add'
      this.$refs.selectAttr.clearForm()
      this.$refs.selectAttr.deleteCheckedAttr()
      this.$refs.selectAttr.dialogVisible = true
    },

    openCreateAttrBox() {
      this.openType2 = 'add'
      this.$refs.createAttr.clearForm()
      this.$refs.createAttr.dialogVisible2 = true
    },

    /**
     * 当添加或者更新了 selectAttr 模块的数据，触发该回调
     * @param {Object} 属性分类数据
     * @param {Number} 更新的话，就会带有 selectIndex
     * @method $emit getSku 通知父级更新了 skuList 数据
     */
    getSelectAttrSku(data, selectIndex) {
      console.log(data, selectIndex)
      if (selectIndex >= 0) {
        this.skuList[selectIndex].classes = data.classes
        this.skuList[selectIndex].classes2 = data.classes2
        this.skuList[selectIndex].desc = data.desc
        this.skuList[selectIndex].feature = data.feature
        this.$emit('updateSku', this.skuList)
      } else {
        this.skuList.push(data)
        this.$emit('getSku', this.skuList)
      }
    },

    /**
     * 当添加或者更新了 createAttr 模块的数据，触发该回调
     * @param {Object} 属性分类数据
     * @param {Number} 更新的话，就会带有 selectIndex
     * @method $emit getSku 通知父级更新了 skuList 数据
     */
    getCreateAttrSku(data, selectIndex) {
      if (selectIndex >= 0) {
        this.skuList[selectIndex].classes = data.classes
        this.skuList[selectIndex].desc = data.desc
        this.skuList[selectIndex].feature = data.feature
        this.$emit('updateSku', this.skuList)
      } else {
        this.skuList.push(data)
        this.$emit('getSku', this.skuList)
      }
    },

    async editSku(i) {
      const obj = this.skuList[i]
      console.log('edit:', obj)
      if (obj.type === 0) {
        // 预定义
        this.selectIndex = i
        await this.$refs.selectAttr.editSku(obj)
        this.$refs.selectAttr.dialogVisible = true
        this.openType = 'modify'
      } else {
        this.createAttrSkuId = this.skuList[i].feature.value
        this.selectIndex2 = i
        await this.$refs.createAttr.editSku(obj)
        this.$refs.createAttr.dialogVisible2 = true
        this.openType2 = 'modify'
      }
    },

    closeSku(i) {
      this.skuList.splice(i, 1)
      this.$emit('getSku', this.skuList)
    },

    clear() {
      this.skuList = []
    }
  }
}
</script>

<style lang='less'>
.u-businseAttrList {
  .addValue-list {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    .icon {
      margin-left: 20px;
    }
    &-child {
      padding-bottom: 10px;
    }
  }
}
.sku-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 0;
}
.sku-list {
  border: solid 1px #e5e5e5;
  border-radius: 5px;
  padding: 10px;
  width: 400px;
  margin: 0 20px 20px 0;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    .title {
      padding-right: 30px;
    }
    .icon {
      margin-left: 10px;
    }
  }
}
</style>
